.sx__month-agenda-day {
  padding: var(--sx-spacing-padding2);
  flex: 1;
  display: flex;
  flex-flow: column;
  align-items: center;
  height: 3rem;
  border-radius: var(--sx-rounding-extra-small);
  color: var(--sx-internal-color-text);
}

.sx__month-agenda-day--active {
  box-shadow: inset 0 0 0 3px var(--sx-color-primary);
}

.sx__month-agenda-day__event-icons {
  margin-top: 4px;
  display: flex;
  grid-gap: 3px;
}

.sx__month-agenda-day__event-icon {
  $icon-size: 6px;

  height: $icon-size;
  width: $icon-size;
  border-radius: 50%;
  filter: brightness(1.6);

  .is-dark & {
    filter: initial;
  }
}
